<template>
  <page-frame>

    <!--pc适配-->
    <div class="Pc">
      <div style="width:100%;z-index: -1;" v-if="!isLogin">
        <el-carousel height="320px" indicator-position="none">
          <el-carousel-item>
            <div class="banner1" style="color:#fff">
              <h1 style="font-size: 2.5em;line-height: 1em;margin: 0px 0px 1.5rem;font-weight: 900;text-transform: uppercase;">
                $10 RISK FREE BET
              </h1>
              <p style="font-size: 14px">With your 1st deposit!</p>
              <span class="btn" @click="joinNow">Join Now</span>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div
                class="banner1 banner2"
                style="color:#fff">
              <h1
                  style="font-size: 2.5em;line-height: 1em;margin: 0px 0px 1.5rem;font-weight: 900;text-transform: uppercase;">
                $10 RISK FREE BET
              </h1>
              <p style="font-size: 14px">With your 1st deposit!</p>
              <span class="btn" @click="joinNow">Join Now</span>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div
                class="banner1 banner3"
                style="color:#fff">
              <h1
                  style="font-size: 2.5em;line-height: 1em;margin: 0px 0px 1.5rem;font-weight: 900;text-transform: uppercase;">
                $10 RISK FREE BET
              </h1>
              <p style="font-size: 14px">With your 1st deposit!</p>
              <span class="btn" @click="joinNow">Join Now</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="main-contain">
        <!-- 左边菜单 -->
        <div class="menu" style="">

          <div class="navbar">
            <div v-for="(v,k) in navbarList" v-if="navbarList.length" :key="k" class="item"
                 @click="onNavbarActive(k)">
              <img :src="k==navbarActive?v.activeSrc:v.src" height="30" width="30"/>
              <span :class="{active:k==navbarActive}">
            {{ v.text }}
          </span>
            </div>
          </div>
          <div class="top-events">
            <div class="top-leagues">
              TOP LEAGUES
            </div>
            <div class="list">
              <div v-if="navbarActive==2" class="li" @click="menuClick(null)">All</div>

              <div
                  v-for="(item, index) in mainMenuData"
                  v-if="mainMenuData.length"
                  :key="index"
                  :class="{li:true,active:item.qh==chooseMenuId}"
                  @click="menuClick(item)"
              >
                <div v-if="navbarActive == 2">
                  {{ item.league[language] }}
                </div>
                <div v-if="navbarActive == 1" class="">
                  <div class="name">Score 4</div>
                  <div>{{ 'Starts:' + item.time }}</div>
                  <div class="currency">50,000.00 R$</div>
                </div>

                <div v-if="navbarActive == 0">
                  <div class="name">Jackpot</div>
                  <div>{{ 'Starts:' + item.time }}</div>
                  <div class="currency">100,000.00 R$</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间内容区域 -->
        <div class="main">
          <div style="background: #000">
            <!-- 标题 -->
            <div class="title">
              <div class="left">
                1x2
              </div>
              <div class="right">
                <span>1个</span>
                <span>x</span>
                <span>2个</span>
              </div>
            </div>
            <!-- 内容 -->

            <!-- 过关 -->
            <div v-if="navbarActive==2">
              <div
                  v-for="(item, index) in mainContainData"
                  :key="index"
                  :style="{
                  display:
                    !chooseMenuId || chooseMenuId === item.leagueId
                      ? 'flex'
                      : 'none',
                }"
                  class="li"

              >

                <div style="flex: 1">
                  <div class="asb-text league">
                    {{ item.time }}|{{ item.league[language] }}
                  </div>
                  <div class="team pb-6">
                    {{ item.teamA[language] }}
                  </div>
                  <div class="team">
                    {{ item.teamB[language] }}
                  </div>
                </div>


                <div class="odds">
                  <span
                      :class="item.isTeamA ? 'active' : ''"
                      class="btn"
                      @click="chooseList('A', item)"
                  >
                    {{ item.teamAodds }}
                  </span>
                  <span
                      :class="item.isTeamB ? 'active' : ''"
                      class="btn"
                      @click="chooseList('B', item)"
                  >
                    {{ item.draw }}
                  </span>
                  <span
                      :class="item.isTeamC ? 'active' : ''"
                      class="btn"
                      @click="chooseList('C', item)"
                  >
                    {{ item.teamBodds }}
                  </span>
                </div>


              </div>
            </div>

            <!-- 足球13 -->
            <div v-if="navbarActive==0" class="z13">
              <div
                  v-for="(item, index) in mainContainData"
                  :key="index"

                  class="box"

              >
                <div class="key">
                  {{ index < 9 ? '0' + (index + 1) : index + 1 }}
                </div>
                <div style="flex: 1;margin-left: 8px">
                  <div class="asb-text league">
                    {{ item.time }}|{{ item.league[language] }}
                  </div>
                  <div class="team pb-6">
                    {{ item.teamA[language] }}
                  </div>
                  <div class="team">
                    {{ item.teamB[language] }}
                  </div>
                </div>


                <div class="odds">
                  <span
                      :class="item.isTeamA ? 'active' : ''"
                      class="btn"
                      @click="choosez13List('A', item)"
                  >
                    {{ item.teamA[language] }}
                  </span>
                  <span
                      :class="item.isTeamB ? 'active' : ''"
                      class="btn"
                      @click="choosez13List('B', item)"
                  >
                   DRAW
                  </span>
                  <span
                      :class="item.isTeamC ? 'active' : ''"
                      class="btn"
                      @click="choosez13List('C', item)"
                  >
                    {{ item.teamB[language] }}
                  </span>
                </div>


              </div>
            </div>

            <!-- 比分竞猜 -->
            <div v-if="navbarActive==1" class="bd">
              <div
                  v-for="(item, index) in mainContainData"
                  :key="index"
                  class="box"
              >
                <div class="key">
                  {{ index < 9 ? '0' + (index + 1) : index + 1 }}
                </div>


                <div style="flex: 1;margin-left: 8px">
                  <div class="asb-text league">
                    {{ item.time }}|{{ item.league[language] }}
                  </div>
                  <div class="bs">

                    <div class="item">
                      <p style="text-align: center;font-size:14px;padding:6px 0">{{ item.teamA[language] }}</p>
                      <el-steps :active="item.TeamA_num" :align-center="true" finish-status="wait">
                        <el-step v-for="(v,k) in steplist" v-if="steplist.length>1" :key="k"
                                 :title="String(v)" @click="choosebdList('A',item,k)"/>
                      </el-steps>
                    </div>
                    <div class="item odds">
                       <span
                           :class="item.isTeam ? 'active' : ''"
                           class="btn"
                           @click="choosebdList('C', item)"
                       >
                     {{
                           item.TeamA_num ? steplist[item.TeamA_num] : 0
                         }} : {{ item.TeamB_num ? steplist[item.TeamB_num] : 0 }}
                  </span>

                    </div>
                    <div class="item">
                      <p style="text-align: center;font-size:14px;padding:6px 0">{{ item.teamB[language] }}</p>
                      <el-steps :active="item.TeamB_num" :align-center="true" finish-status="wait">
                        <el-step v-for="(v,k) in steplist" v-if="steplist.length>1" :key="k" :title="String(v)"
                                 @click="choosebdList('B',item,k)"/>
                      </el-steps>
                    </div>
                  </div>
                </div>


              </div>
            </div>
          </div>
        </div>
        <!-- 侧边栏 -->
        <div class="side">
          <!-- 混合 -->
          <div v-if="navbarActive===2">
            <!-- 投注单 -->
            <div v-if="chooseListData.length" class="betting-slip">
              <div class="betslip">
                Betslip
                <span v-if="chooseListData.length">
                {{ chooseListData.length }}
              </span>
              </div>
              <div>
                <div v-for="(item, index) in chooseListData" :key="index" class="data-li">
                  <div class="choosebox">
                    <img v-if="item.isFlag" class="pointer" height="14" src="@/assets/images/xuanzhong.png" width="14"
                         @click="listDataOperation(index)"/>
                    <img v-if="!item.isFlag" class="pointer" height="14" src="@/assets/images/weixuanzhong.png"
                         width="14" @click="listDataOperation(index)"/>
                    <span class="pointer" @click="listDataOperation(index)">
                    {{ item.teamA[language] }} vs{{ item.teamB[language] }}
                  </span>
                    <CloseBold
                        class="del pointer"
                        @click="del(index)"
                    />
                  </div>
                  <div
                      style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 14px;
                  "
                  >
                  <span
                      style="
                      width: 0.8rem;
                      height: 0.8rem;
                      line-height: 0.9rem;
                      text-align: center;
                      background: rgb(0, 0, 0);
                      color: #000;
                      font-size: 9px;
                      transform: calc(0.5);
                      display: inline-block;
                      border-radius: 2px;
                    "
                  >
                    B
                  </span>
                    <span
                        style="
                      color: #fff;
                      font-weight: 400;
                      font-size: 14px;
                      flex: 1;
                      margin-left: 8px;
                    "
                    >
                    1x2
                  </span>
                  </div>
                  <div style="display: flex; align-items: center">
                  <span
                      style="
                      margin-left: 24px;
                      color: #fad749;
                      flex: 1;
                      font-size: 14px;
                      font-weight: bold;
                    "
                  >
                    <!-- 画 -->
                  </span>
                    <span style="font-size: 14px; color: #fad749">
                    {{ item.storeNumA || item.storeNumB || item.storeNumC }}
                  </span>
                  </div>
                </div>
              </div>

              <!-- 全部清除 -->
              <div class="clear-all pointer" @click="del('All')">
                <span>Clear all</span>
                <CloseBold class="icon"/>
              </div>
              <div class="z_amount">
                <div class="li-input">
                  <span style="flex: 1">Singles</span>
                  <!-- <span style="margin-right: 8px">0x</span> -->
                  <input
                      v-model="money"
                      class="input"
                      placeholder=""
                      type="number"
                  />
                </div>
              </div>
              <!-- 合计 -->
              <div class="bet_amount">
                <div class="amount">
                  <span style="flex: 1">Number of bets</span>
                  <span>{{ bettingSlipNumber || 0 }}</span>
                </div>
                <div class="win">
                  <span style="flex: 1">Total Win</span>
                  <span class="total">
                  {{ total }}
                </span>
                </div>
              </div>
              <div class="place-bet-box">
                <div :class="{active:is_bet,pointer:true,'place-bet':true} " @click="submitPlaceBet">
                  PLACE BET
                </div>
              </div>
            </div>

            <!-- 投注单 -->
            <div
                v-if="!is_bet"
                class="betting-slip"
                style="width: 300px; background-color: #000"
            >
              <div
                  style="
                color: #da0000;
                text-align: center;
                padding: 9px;
                border-bottom: 2px solid #da0000;
                font-size: 14px;
                font-weight: bold;
              "
              >
                Betslip
              </div>
              <div
                  style="
                display: block;
                padding: 16px 0;
                text-align: center;
                font-size: 14px;
                font-weight: bold;
              "
              >
                No selections in the betslip
              </div>
            </div>
          </div>
          <!-- 13场和比分竞猜 -->
          <div v-else class="z betting-slip">
            <div class="betslip">
              Betslip
              <span v-if="chooseListData.length">
                {{ chooseListData.length }}
              </span>
            </div>

            <!-- 全部清除 -->
            <div class="clear-all pointer" @click="del('All')">
              <span>Clear all</span>
              <CloseBold class="icon"/>
            </div>
            <div class="z_amount">
              <div class="li-input">
                <span style="flex: 1">Singles</span>
                <!-- <span style="margin-right: 8px">0x</span> -->
                <input
                    v-model="z_amount"
                    class="input"
                    placeholder=""
                    type="number"
                />
              </div>
            </div>
            <!-- 合计 -->
            <div class="bet_amount">
              <div class="amount">
                <span style="flex: 1">Total stake</span>
                <span>{{ z_num * z_amount || 0 }}</span>
              </div>

            </div>
            <div class="place-bet-box">
              <div class="place-bet err" v-if="err_msg">
                {{ err_msg }}
              </div>
            </div>
            <div class="place-bet-box">
              <div :class="{active:is_bet,pointer:true,'place-bet':true} " @click="submitPlaceBet">
                PLACE BET
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--移动端适配-->
    <div class="Mobile" style="height:100%;overflow: auto" id="mainContain">
      <div
          style="display: flex;align-items: center;padding: 20px 10px 10px;background: #1e1e1e;color:#bbb;font-size: 12px;justify-content: flex-end"
          v-if="isLogin">
        <div>USDT: <span style="font-weight: bold;font-size:14px;color:#fff;margin-right: 10px">{{
            userInfo.money || 0
          }}</span>
        </div>
        <div style="text-align: right">Integral: <span
            style="font-weight: bold;font-size:16px;color:#fff">{{ userInfo.score || 0 }}</span>
        </div>
      </div>
      <div style="width:100%;z-index: -1;" v-if="!isLogin">
        <el-carousel height="240px" indicator-position="none">
          <el-carousel-item>
            <div
                class="banner1"
                style="color:#fff">
              <h1
                  style="font-size: 22px;line-height: 1em;font-weight: 900;text-transform: uppercase;    font-family: Barlow, sans-serif;">
                $10 RISK FREE BET
              </h1>
              <span class="btn" @click="joinNow">Join Now</span>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div
                class="banner1 banner2"
                style="color:#fff">
              <h1
                  style="font-size: 22px;line-height: 1em;font-weight: 900;text-transform: uppercase;    font-family: Barlow, sans-serif;">
                $10 RISK FREE BET
              </h1>
              <span class="btn" @click="joinNow">Join Now</span>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div
                class="banner1 banner3"
                style="color:#fff">
              <h1
                  style="font-size: 22px;line-height: 1em;font-weight: 900;text-transform: uppercase;    font-family: Barlow, sans-serif;">
                $10 RISK FREE BET
              </h1>
              <span class="btn" @click="joinNow">Join Now</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div
          class="main-contain"
          style="
          background-color: rgb(30, 30, 30);
          width: 100%;
          height: 100%;
          overflow: hidden;
          box-sizing: border-box;
        "
      >
        <div class="menu">
          <div class="navbar">
            <div v-for="(v,k) in navbarList" v-if="navbarList.length" :key="k" class="item"
                 @click="onNavbarActive(k)">
              <img :src="k==navbarActive?v.activeSrc:v.src" height="30" width="30"/>
              <span :class="{active:k==navbarActive}">
                {{ v.text }}
              </span>
            </div>
          </div>
        </div>
        <!-- 左边菜单 -->
        <div class="menu" style="width: 100%; background-color: #3c3c3c">
          <div class="top-events">
            <div
                style="
                background: #000;
                color: #fff;
                font-size: 16px;
                font-weight: 700;
                padding: 12px;
                text-transform: uppercase;
              "
            >
              TOP LEAGUES
            </div>
            <div class="list">
              <div class="li" @click="menuClick(null)" v-if="navbarActive==2">All</div>
              <div
                  v-for="(item, index) in mainMenuData"
                  v-if="mainMenuData.length"
                  :key="index"
                  :class="{li:true,active:navbarActive==2?!chooseMenuId || item.leagueId == chooseMenuId: item.qh==chooseMenuId}"
                  @click="menuClick(item)"
              >

                <div v-if="navbarActive == 2">
                  {{ item.league[language] }}
                </div>
                <div v-if="navbarActive == 1" class="">
                  <div class="name">Score 4</div>
                  <div>{{ 'Starts:' + item.time }}</div>
                  <div class="currency">50,000.00 R$</div>
                </div>

                <div v-if="navbarActive == 0">
                  <div class="name">Jackpot</div>
                  <div>{{ 'Starts:' + item.time }}</div>
                  <div class="currency">100,000.00 R$</div>
                </div>
              </div>
            </div>
          </div>
        </div>


        <!-- 中间内容区域 -->
        <div class="main" style="color: #fff">
          <div style="background: #000">
            <!-- 标题 -->
            <div
                v-if="false"
                style="
                display: flex;
                border-bottom: 1px solid rgba(62, 61, 61, 0.86);
                padding: 0 6px;
              "
            >
              <div
                  style="
                  flex: 1;
                  line-height: 42px;
                  height: 42px;
                  margin-left: 12px;
                "
              >
                1x2
              </div>
              <div style="display: flex">
                <span
                    style="
                    width: 64px;
                    line-height: 42px;
                    height: 42px;
                    text-align: center;
                    margin-right: 4px;
                  "
                >
                  1个
                </span>
                <span
                    style="
                    width: 64px;
                    line-height: 42px;
                    height: 42px;
                    text-align: center;
                    margin-right: 4px;
                  "
                >
                  x
                </span>
                <span
                    style="
                    width: 64px;
                    line-height: 42px;
                    height: 42px;
                    text-align: center;
                    margin-right: 4px;
                  "
                >
                  2个
                </span>
              </div>
            </div>
            <!-- 内容 -->

            <!-- 过关 -->
            <div v-if="navbarActive==2">
              <div
                  v-for="(item, index) in mainContainData"
                  :key="index"
                  :style="{
                  display:
                    !chooseMenuId || chooseMenuId === item.leagueId ? 'flex' : 'none',
                }"
                  class="li"
                  style="
                  padding: 10px 6px;
                  border-bottom: 1px solid rgba(62, 61, 61, 0.86);
                  align-items: center;
                  width: 100%;
                  box-sizing: border-box;
                "
              >
                <div style="width: 100%">
                  <div>
                    <div
                        class="asb-text"
                        style="
                        font-size: 11px;
                        padding-bottom: 11px;
                        color: #828282;
                      "
                    >
                      {{ item.time }}|{{ item.league[language] }}
                    </div>
                    <div
                        style="
                        font-weight: 400;
                        font-size: 14px;
                        padding-bottom: 6px;
                      "
                    >
                      {{ item.teamA[language] }}
                    </div>
                    <div style="font-weight: 400; font-size: 14px">
                      {{ item.teamB[language] }}
                    </div>
                  </div>
                  <div class="odds" style="width: 100%; margin-top: 0.4rem">
                    <span
                        :class="item.isTeamA ? 'active' : ''"
                        class="btn"
                        style="width: 33.3%; display: inline-block"
                        @click="chooseList('A', item)"
                    >
                      {{ item.teamAodds }}
                    </span>
                    <span
                        :class="item.isTeamB ? 'active' : ''"
                        class="btn"
                        style="width: 33.3%; display: inline-block"
                        @click="chooseList('B', item)"
                    >
                      {{ item.draw }}
                    </span>
                    <span
                        :class="item.isTeamC ? 'active' : ''"
                        class="btn"
                        style="width: 33.3%; display: inline-block"
                        @click="chooseList('C', item)"
                    >
                      {{ item.teamBodds }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 足球13 -->
            <div v-if="navbarActive==0" class="z13">
              <div
                  v-for="(item, index) in mainContainData"
                  :key="index"
                  class="box"

              >
                <div class="key">
                  {{ index < 9 ? '0' + (index + 1) : index + 1 }}
                </div>
                <div
                    style="flex: 1;margin-left: 8px;border-left: 1px solid rgba(62, 61, 61, 0.86);padding: 10px 0 10px 10px">
                  <div class="asb-text league">
                    {{ item.time }}|{{ item.league[language] }}
                  </div>
                  <div class="team pb-6" style="margin-bottom: 6px">
                    {{ item.teamA[language] }}
                  </div>
                  <div class="team" style="margin-bottom: 10px">
                    {{ item.teamB[language] }}
                  </div>
                  <div class="odds">
                  <span
                      :class="item.isTeamA ? 'active' : ''"
                      class="btn"
                      @click="choosez13List('A', item)"
                  >
                    {{ item.teamA[language] }}
                  </span>
                    <span
                        :class="item.isTeamB ? 'active' : ''"
                        class="btn"
                        @click="choosez13List('B', item)"
                    >
                   DRAW
                  </span>
                    <span
                        :class="item.isTeamC ? 'active' : ''"
                        class="btn"
                        @click="choosez13List('C', item)"
                    >
                    {{ item.teamB[language] }}
                  </span>
                  </div>
                </div>


              </div>
            </div>

            <!-- 比分竞猜 -->
            <div v-if="navbarActive==1" class="bd">
              <div
                  v-for="(item, index) in mainContainData"
                  :key="index"
                  class="box"
              >
                <div class="key">
                  {{ index < 9 ? '0' + (index + 1) : index + 1 }}
                </div>


                <div style="flex: 1;padding:10px 0;">
                  <div class="asb-text league">
                    {{ item.time }}|{{ item.league[language] }}
                  </div>
                  <div class="bs">
                    <div class="item">

                      <div style="text-align: center;font-size: 13px;margin-bottom:5px">{{ item.teamA[language] }}</div>
                      <el-steps :active="item.TeamA_num" :align-center="true" finish-status="wait">
                        <el-step v-for="(v,k) in steplist" v-if="steplist.length>1" :key="k"
                                 :title="String(v)" @click="choosebdList('A',item,k)"/>
                      </el-steps>
                    </div>
                    <div class="item odds" style="width: 90%;margin: 20px auto">
                       <span
                           :class="item.isTeam ? 'active' : ''"
                           class="btn"
                           @click="choosebdList('C', item)"
                       >
                     {{
                           item.TeamA_num ? steplist[item.TeamA_num] : 0
                         }} : {{ item.TeamB_num ? steplist[item.TeamB_num] : 0 }}
                  </span>

                    </div>
                    <div class="item">
                      <div style="text-align: center;font-size: 13px;margin-bottom:5px">{{ item.teamB[language] }}</div>
                      <el-steps :active="item.TeamB_num" :align-center="true" finish-status="wait">
                        <el-step v-for="(v,k) in steplist" v-if="steplist.length>1" :key="k" :title="String(v)"
                                 @click="choosebdList('B',item,k)"/>
                      </el-steps>
                    </div>
                  </div>
                </div>


              </div>
            </div>

          </div>
        </div>
        <!-- 侧边栏 -->
        <div class="side sideClass" id="sideId" style="width: 100%">
          <!-- 投注单 -->

          <div v-if="navbarActive===2">
            <div
                v-if="chooseListData.length"
                class="betting-slip"
                style="width: 100%; background-color: #000"
            >
              <div
                  style="
                color: #da0000;
                text-align: center;
                padding: 9px;
                border-bottom: 2px solid #da0000;
                font-size: 14px;
                font-weight: bold;
              "
              >
                Betslip
                <span
                    v-if="chooseListData.length"
                    style="
                  background: #fad749;
                  color: #000;
                  border-radius: 100%;
                  font-size: 12px;
                  font-weight: 400;
                  height: 20px;
                  line-height: 20px;
                  margin-left: 4px;
                  text-align: center;
                  width: 20px;
                  display: inline-block;
                "
                >
                {{ chooseListData.length }}
              </span>
              </div>
              <div>
                <div
                    v-for="(item, index) in chooseListData"
                    :key="index"
                    class="data-li"
                    style="
                  padding: 10px 8px;
                  border-bottom: 1px solid rgb(62 61 61 / 86%);
                "
                >
                  <div
                      style="display: flex; align-items: center; margin-bottom: 4px"
                  >
                    <img
                        v-if="item.isFlag"
                        alt=""
                        height="14"
                        src="@/assets/images/xuanzhong.png"
                        style="cursor: pointer"
                        width="14"
                        @click="listDataOperation(index)"
                    />
                    <img
                        v-if="!item.isFlag"
                        alt=""
                        height="14"
                        src="@/assets/images/weixuanzhong.png"
                        style="cursor: pointer"
                        width="14"
                        @click="listDataOperation(index)"
                    />
                    <span
                        style="
                      color: #fff;
                      font-weight: 400;
                      font-size: 14px;
                      flex: 1;
                      margin-left: 8px;
                      cursor: pointer;
                    "
                        @click="listDataOperation(index)"
                    >
                    {{ item.teamA[language] }} vs
                    {{ item.teamB[language] }}
                  </span>
                    <CloseBold
                        style="
                      width: 1em;
                      height: 1em;
                      color: #828282;
                      cursor: pointer;
                    "
                        @click="del(index)"
                    />
                  </div>
                  <div
                      style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 14px;
                  "
                  >
                  <span
                      style="
                      width: 0.8rem;
                      height: 0.8rem;
                      line-height: 0.9rem;
                      text-align: center;
                      background: rgb(0, 0, 0);
                      color: #000;
                      font-size: 9px;
                      transform: calc(0.5);
                      display: inline-block;
                      border-radius: 2px;
                    "
                  >
                    B
                  </span>
                    <span
                        style="
                      color: #fff;
                      font-weight: 400;
                      font-size: 14px;
                      flex: 1;
                      margin-left: 8px;
                    "
                    >
                    1x2
                  </span>
                  </div>
                  <div style="display: flex; align-items: center">
                  <span
                      style="
                      margin-left: 24px;
                      color: #fad749;
                      flex: 1;
                      font-size: 14px;
                      font-weight: bold;
                    "
                  >
                    <!-- 画 -->
                  </span>
                    <span style="font-size: 14px; color: #fad749">
                    {{ item.storeNumA || item.storeNumB || item.storeNumC }}
                  </span>
                  </div>
                </div>
              </div>
              <!-- 全部清除 -->
              <div
                  class="clear-all"
                  style="
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 10px 6px;
                border-bottom: 1px solid rgb(62 61 61 / 86%);
                cursor: pointer;
              "
                  @click="del('All')"
              >
              <span style="color: #fff; font-size: 14px; margin-right: 4px">
                Clear all
              </span>
                <CloseBold style="width: 1em; height: 1em; color: #fff"/>
              </div>
              <div style="border-bottom: 1px solid rgb(62 61 61 / 86%)">
                <div
                    class="li-input"
                    style="
                  display: flex;
                  align-items: center;
                  font-size: 14px;
                  color: #fff;
                  padding: 9px;
                "
                >
                  <span style="flex: 1">Singles</span>
                  <!-- <span style="margin-right: 8px">0x</span> -->
                  <input
                      v-model="money"
                      class="input"
                      placeholder=""
                      style="
                    border: none;
                    background-color: #fff;
                    width: 80px;
                    border-radius: 4px;
                    text-align: center;
                  "
                      type="number"
                  />
                </div>
              </div>
              <!-- 合计 -->
              <div style="font-size: 14px; color: #fff; padding: 10px 8px">
                <div
                    style="display: flex; align-items: center; margin-bottom: 4px"
                >
                  <span style="flex: 1">Number of bets</span>
                  <span>{{ bettingSlipNumber || 0 }}</span>
                </div>
                <!-- <div style="display: flex; align-items: center; margin-bottom: 4px">
                <span style="flex: 1">Total stake</span>
                <span>0.00</span>
              </div> -->
                <div
                    style="display: flex; align-items: center; margin-bottom: 4px"
                >
                  <span style="flex: 1">Total Win</span>
                  <span style="color: #31c27c; font-weight: bold">
                  {{ total }}
                </span>
                </div>
              </div>
              <div style="padding: 0 9px 6px">
                <div
                    :style="{
                  background: money ? '#31c27c' : '#1c7148',
                  cursor: money ? 'pointer' : 'none',
                }"
                    style="
                  height: 44px;
                  color: #fff;
                  background-color: #1c7148;
                  line-height: 44px;
                  text-align: center;
                  font-size: 14px;
                  font-weight: 600;
                  border-radius: 4px;
                "
                    @click="submitPlaceBet"
                >
                  PLACE BET
                </div>
              </div>
            </div>
            <!-- 投注单 -->
            <div
                v-if="chooseListData.length == 0"
                class="betting-slip"
                style="width: 100%; background-color: #000"
            >
              <div
                  style="
                color: #da0000;
                text-align: center;
                padding: 9px;
                border-bottom: 2px solid #da0000;
                font-size: 14px;
                font-weight: bold;
              "
              >
                Betslip
              </div>
              <div
                  style="
                display: block;
                padding: 16px 0;
                text-align: center;
                font-size: 14px;
                font-weight: bold;
              "
              >
                No selections in the betslip
              </div>
            </div>
          </div>
          <!-- 13场和比分竞猜 -->
          <div v-else class="z betting-slip">
            <div class="betslip">
              Betslip
              <span v-if="chooseListData.length">
                {{ chooseListData.length }}
              </span>
            </div>

            <!-- 全部清除 -->
            <div class="clear-all pointer" @click="del('All')">
              <span>Clear all</span>
              <CloseBold class="icon"/>
            </div>
            <div class="z_amount">
              <div class="li-input">
                <span style="flex: 1">Singles</span>
                <!-- <span style="margin-right: 8px">0x</span> -->
                <input
                    v-model="z_amount"
                    class="input"
                    placeholder=""
                    type="number"
                />
              </div>
            </div>
            <!-- 合计 -->
            <div class="bet_amount">
              <div class="amount">
                <span style="flex: 1">Total stake</span>
                <span>{{ z_num * z_amount || 0 }}</span>
              </div>

            </div>
            <div style="padding: 0 9px 6px">
              <div
                  :style="{
                  background: is_bet ? '#31c27c' : '#1c7148',
                  cursor: is_bet ? 'pointer' : 'none',
                }"
                  style="
                  height: 44px;
                  color: #fff;
                  background-color: #1c7148;
                  line-height: 44px;
                  text-align: center;
                  font-size: 14px;
                  font-weight: 600;
                  border-radius: 4px;
                "
                  @click="submitPlaceBet"
              >
                PLACE BET
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
          style="position: fixed;bottom: 6px;right: 6px;width: 74px;height: 74px;border-radius: 50%;overflow: hidden;background: #fad749;color: #000;text-align: center;cursor: pointer;z-index: 100"
          v-if=" tmpArr.length || bdArr.length || chooseListData.length" @click="scrollTo">
        <Tickets
            style="width: 30px;height: 30px;margin-top: 10px"
        />
        <span style="display: block;font-size: 11px;color:#000">Betslip</span>
        <!--足球13-->
        <div
            style="position: absolute;top: 8px;right: 10px;    background: #000;color: #fad749;font-weight: 400;border-radius: 50%;font-size: 10px;width:20px;height: 20px;line-height: 20px;text-align: center;display: inline-block"
            v-if="tmpArr.length && navbarActive==0"
        >
          {{ tmpArr.length }}
        </div>
        <!--比分竞猜-->
        <div
            style="position: absolute;top: 8px;right: 10px;    background: #000;color: #fad749;font-weight: 400;border-radius: 50%;font-size: 10px;width:20px;height: 20px;line-height: 20px;text-align: center;display: inline-block"
            v-if="bdArr.length && navbarActive==1"
        >
          {{ bdArr.length }}
        </div>
        <!--混合-->
        <div
            style="position: absolute;top: 8px;right: 10px;    background: #000;color: #fad749;font-weight: 400;border-radius: 50%;font-size: 10px;width:20px;height: 20px;line-height: 20px;text-align: center;display: inline-block"
            v-if="chooseListData.length && navbarActive==2"
        >
          {{ chooseListData.length }}
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, toRefs, watch, nextTick} from "vue";
import {ArrowDownBold, ArrowUpBold, CloseBold, Tickets} from "@element-plus/icons";


export default {
  name: "index",
  components: {
    ArrowDownBold,
    ArrowUpBold,
    CloseBold,
    Tickets,
  },
  setup() {
    /* 全局挂载utils工具类 start */
    const {$api, $common, $validate, $constant, $elUtils, $router, $ext} =
        getCurrentInstance().proxy;
    /* 全局挂载 end */

    const state = reactive({
      isLogin: $common.getKeyVal("system", "isLogin", true) == 'true',
      userInfo: $ext.getUser(),
      loadingFloor: false,
      language: $common.getKeyVal("system", "language"),
      // 中间内容数据
      mainContainData: [],
      //菜单
      mainMenuData: [],
      //期号
      chooseMenuId: "",
      chooseListData: [],
      money: 1,
      total: 0,
      bettingSlipNumber: 0,
      navbarList: [
        {
          text: '足球13',
          src: new URL('../../../assets/images/zuqiu.png', import.meta.url).href,
          activeSrc: new URL('../../../assets/images/zuqiu.png', import.meta.url).href
        },
        {
          text: '比分竞猜',
          src: new URL('../../../assets/images/bifenjingcai.png', import.meta.url).href,
          activeSrc: new URL('../../../assets/images/bifenjingcai.png', import.meta.url).href
        },
        {
          text: '混合过关',
          src: new URL('../../../assets/images/bofang.png', import.meta.url).href,
          activeSrc: new URL('../../../assets/images/bofang.png', import.meta.url).href
        },
      ],
      //
      navbarActive: 0,
      //足球13
      tmpArr: [],
      is_bet: false,
      //注数
      z_num: 1,
      //每注金额
      z_amount: 1,
      //下注金额
      bet_amount: 0,
      //波胆
      bdArr: [],
      steplist: [0, 1, 2, 3, '4+'],
      top: 0,
      startY: 0,          // 保存 y轴点的位置
      touching: false,   // 代表当前是否处于 下拉刷新行为的开关，也就是当属于滚动行为时，就要退出该事件机制
      totalNumber: 0, // 合计总数
      err_msg: '',//错误信息
    });

    onMounted(() => {
      getData()
    });

    watch(
        () => state.money,
        (newValue, oldValue) => {
          computTotal();
        }
    );

    const getData = () => {
      $api.eventIndex({type: state.navbarActive}).then((res) => {

        if (state.navbarActive != 2) {
          state.mainContainData = res.data[0].data
          state.chooseMenuId = res.data[0].qh
          state.mainMenuData = res.data

        } else {
          state.mainContainData = res.data;
          state.chooseMenuId = null
          let arr = [];
          for (let i in res.data) {
            let leagueId = res.data[i]["leagueId"];
            arr[leagueId] = res.data[i];
          }
          for (let i in arr) {
            state.mainMenuData.push(arr[i]);
          }
        }

      });
    }

    // 菜单
    const menuClick = (o) => {
      state.chooseListData = []
      state.tmpArr = []
      state.bdArr = []
      if (state.navbarActive !== 2) {
        state.chooseMenuId = o?.qh;
        state.mainContainData = o.data
      } else {
        state.chooseMenuId = o?.leagueId;
      }
      if (!$validate.isNull(state.mainContainData) && state.navbarActive != 2) {
        for (const item of state.mainContainData) {
          item.isTeam = false
          item.isTeamA = false
          item.isTeamB = false
          item.isTeamC = false
        }
      }
    };

    // 混合
    const chooseList = (type, data) => {
      state.err_msg = null
      let chooseListData = [];
      for (const item of state.mainContainData) {
        if (item.id == data.id) {
          if (type == "A") {
            item.isTeamA = !item.isTeamA;
            item.isTeamB = false;
            item.isTeamC = false;
          }
          if (type == "B") {
            item.isTeamA = false;
            item.isTeamB = !item.isTeamB;
            item.isTeamC = false;
          }
          if (type == "C") {
            item.isTeamA = false;
            item.isTeamB = false;
            item.isTeamC = !item.isTeamC;
          }
        }
        item.isFlag = true;
        if (item.isTeamA) {
          const main = JSON.parse(JSON.stringify(item));
          main.storeNumA = main.teamAodds;
          delete main.storeNumB;
          delete main.storeNumC;
          chooseListData.push(main);
        }
        if (item.isTeamB) {
          const main = JSON.parse(JSON.stringify(item));
          main.storeNumB = main.draw;
          delete main.storeNumA;
          delete main.storeNumC;
          chooseListData.push(main);
        }
        if (item.isTeamC) {
          const main = JSON.parse(JSON.stringify(item));
          delete main.storeNumA;
          delete main.storeNumB;
          main.storeNumC = main.teamBodds;
          chooseListData.push(main);
        }
      }
      state.chooseListData = chooseListData || [];
      state.is_bet = state.chooseListData.length > 0
      computTotal();
    };

    // 足球13选择
    const choosez13List = (type, data) => {
      state.err_msg = null
      let arr = [];
      for (const item of state.mainContainData) {

        if (item.id == data.id) {
          if (type == "A") {
            item.isTeamA = !item.isTeamA;
          }
          if (type == "B") {
            item.isTeamB = !item.isTeamB;
          }
          if (type == "C") {
            item.isTeamC = !item.isTeamC;
          }
        }
        item.isFlag = true;
        if (item.isTeamA || item.isTeamB || item.isTeamC) {
          arr[item.id] = [];
        }
        if (item.isTeamA) {

          arr[item.id].push(3)
        }
        if (item.isTeamB) {

          arr[item.id].push(1)
        }
        if (item.isTeamC) {
          arr[item.id].push(0)
        }
      }
      state.tmpArr = [];
      let noOfLines = 1;
      for (let i in arr) {
        if (arr[i].length >= 1) {
          state.tmpArr.push({"id": i, data: arr[i]})
          noOfLines = noOfLines * arr[i].length;
        }
      }
      state.is_bet = state.tmpArr.length == 13
      if (state.is_bet) {
        state.z_num = noOfLines;
        state.bet_amount = state.z_num * state.z_amount
      }

    }

    // 比分竞猜
    const choosebdList = (type, data, num) => {
      state.err_msg = null
      state.is_bet = false
      state.bdArr = []
      for (const item of state.mainContainData) {
        if (item.id == data.id) {
          if (type == "A") {
            item.TeamA_num = num;
          }
          if (type == "B") {
            item.TeamB_num = num;
          }
          if (type == "C") {

            item.isTeam = !item.isTeam;
          }
        }

        if (item.isTeam) {
          let par = {};
          par['id'] = item.id
          par['data'] = {};
          par['data']['TeamA_num'] = item.TeamA_num ? item.TeamA_num : 0
          par['data']['TeamB_num'] = item.TeamB_num ? item.TeamB_num : 0
          state.bdArr.push(par)
        }

      }
      if (state.bdArr.length == 4) {
        state.is_bet = true
      }


    }


    // 操作已经赔率列表
    const listDataOperation = (index) => {
      state.chooseListData[index].isFlag =
          !state.chooseListData[index].isFlag;
      computTotal();
    };

    // 删除
    const del = (index) => {
      if (index == "All") {
        state.chooseListData = [];
        resetData();
      } else {
        const item = state.chooseListData[index];
        for (const main of state.mainContainData) {
          if (item.id === main.id) {
            if (item.storeNumA) {
              main.isTeamA = false;
            }
            if (item.storeNumB) {
              main.isTeamB = false;
            }
            if (item.storeNumC) {
              main.isTeamC = false;
            }
          }
        }
        state.chooseListData.splice(index, 1);
      }
    };

    // 重置数据
    const resetData = () => {
      state.bettingSlipNumber = 0;
      state.money = 0;
      state.total = 0.0;
      state.err_msg = null
      state.z_num = 1
      state.bdArr = []
      state.tmpArr = []
      state.is_bet = false
      for (const item of state.mainContainData) {
        item.isTeamA = false;
        item.isTeamB = false;
        item.isTeamC = false;
        item.isTeam = false;
      }
    };

    // 计算总和
    const computTotal = () => {
      let total = state.money;
      let bettingSlipNumber = 0;
      for (const item of state.chooseListData) {
        if (item.isFlag) {
          bettingSlipNumber += 1;
          if (item.storeNumA) {
            total *= item.storeNumA;
          }
          if (item.storeNumB) {
            total *= item.storeNumB;
          }
          if (item.storeNumC) {
            total *= item.storeNumC;
          }
        }
      }
      state.total = total.toFixed(2);
      state.bettingSlipNumber = bettingSlipNumber;
    };

    // 提交
    const submitPlaceBet = () => {
      if (!state.is_bet) {
        return false
      }
      const param = {};
      if (state.navbarActive == 2) {
        let data = [];
        state.chooseListData.forEach((v) => {
          if (v.isFlag) {
            let item = {};
            let cur = v.isTeamA ? 3 : v.isTeamB ? 1 : 0;
            let odds = v.isTeamA
                ? v.teamAodds
                : v.isTeamB
                    ? v.teamBodds
                    : v.draw;
            item["id"] = v.id;
            item["data"] = cur;
            item["odds"] = odds;
            data.push(item);
          }
        });
        param["data"] = data;
        param["amount"] = state.money;
      } else {

        param["data"] = state.navbarActive == 0 ? state.tmpArr : state.bdArr;
        param["amount"] = state.z_amount;
        param["qh"] = state.chooseMenuId;
      }
      //类型(积分:score,余额:money)默认余额
      param["type"] = "money";
      //下注类型(复式:0,波胆:1,过关:2)默认复式
      param["bet_type"] = state.navbarActive;
      $api.eventBet(param).then((res) => {
        if (res.code == 1) {
          $api.userInfo().then((res) => {
            $common.setKeyVal("system", "userInfo", res.data.userinfo, true);
          })
          state.chooseListData = [];

          resetData();
          $elUtils.successMsg(res.msg);
        } else {
          state.err_msg = res.msg
          // $elUtils.errorMsg(res.msg);
        }
      });
    };

    const onNavbarActive = (e) => {
      state.mainMenuData = [];
      state.mainContainData = []
      state.chooseListData = []
      state.tmpArr = []
      state.bdArr = []
      state.navbarActive = e
      state.is_bet = false
      state.err_msg = null
      getData()
    }

    const touchStart = (e) => {
      console.log('touchStartfn', e)
      // e代表该事件对象，e.targetTouches[0].pageY可以拿到手指按下的 y轴点
      state.startY = e.targetTouches[0].pageY
      // 开启下拉刷新状态
      state.touching = true
    }
    const touchMove = (e) => {
      console.log('touchMove', e)
      //这个 touchMove，只要页面在动都会发生的，所以 touching就起作用了
      // 如果 touching为false，说明这个正在移动的页面不是我们想要的下拉刷新，有可能是用户随意拉了一下页面而已，或者其他
      if (!state.touching) return
      // 获取移动的距离
      let diff = e.targetToc = e.targetTouches[0].pageY - state.startY
      console.log('touchStart', state.startY)
      console.log('touchMove', e.targetTouches[0].pageY)
      //判断是向上拉还是向下拉
      if (diff > 0) {
        // 下拉
        e.preventDefault()
      } else {
        // 上拉
        return
      }
      //这个state.top要对应绑定到该元素的transform: translateY(+top+ 'px')上，不然是无法拉动的
      // 因此这里还要对偏移高度做一下处理，直接设置diff +(state.state === 2 ? 40 : 0) 太快了，因为拉取幅度太大
      // 让diff*0.25这样子就差不多了
      state.top = Math.floor(diff * 0.25) + (state.state === 2 ? 40 : 0)
      if (state.top >= 40) {
        state.state = 1   //代表正在拉取
      } else {
        state.state = 0  // 代表初始转态
      }
    }

    const touchEnd = (e) => {
      console.log('touchMove', e)
      state.touching = false
      if (state.state === 2) {
        state.top = 40
        return
      }
      // 判断抬起时的高度，是大于40 就开启刷新
      if (state.top >= 40) {
        // state.refresh()
      } else {
        state.state = 0
        state.top = 0
      }
    }

    // 合计跳转
    const scrollTo = (e) => {
      nextTick(() => {
        const top = document.querySelector('.sideClass').offsetTop - 100
        console.log('sideClass', document.querySelector('.sideClass').offsetTop)
        console.log('top', top)
        window.scrollTo({top})
      })
    }

    // 跳转注册
    const joinNow = () => {
      $router.push({name: "Register"});
    }
    return {
      ...toRefs(state),
      menuClick,
      chooseList,
      listDataOperation,
      del,
      submitPlaceBet,
      choosez13List,
      choosebdList,
      onNavbarActive,
      touchStart,
      touchMove,
      touchEnd,
      scrollTo,
      joinNow,
    };
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import 'guessingCompetition/guessingCompetition';
</style>
